<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			body {
				padding-top: 20px;
			}

			* {
				padding: 0px;
				margin: 0px;
				list-style-type: none;
			}

			#container {
				width: 686px;
				margin: auto;
			}

			#header {
				height: 450px;
				width: 686px;
			}

			#he1 {
				background-color: black;
				height: 53px;
				opacity: 0.4;
				width: 686px;
			}

			#he1 ul {
				font-size: 16px;
				height: 53px;
				width: 686px;
			}

			#he1 ul li {
				float: left;
				margin: 0 8px;
			}

			#he1 ul li a {
				font-family: "microsoft yahei";
				color: aliceblue;
				text-align: center;
				line-height: 53px;
				text-decoration: none;
				padding: 0px 10px 0px 0px;
				font-style: italic;
			}

			#he1 ul li a:hover {
				font-size: 18px;
			}

			#he1 span {
				font-size: 24px;
				color: #d2d6d7;
				font-style: normal;
			}

			#he1 span:hover {
				color: #f30000;
			}

			.w1 {
				margin-right: 240px;
			}

			.w2 {
				border-top: #3984e1 solid 7px;
				padding: 15px 0px 10px 0px;
				text-align: center;
				color: #41516e;
				font-family: "arial narrow";
				font-size: 40px;
				text-decoration: none;
			}

			#ph {
				width: 613px;
				height: 250px;
				margin: auto;
				padding-bottom: 25px;
			}

			#ph ul {
				font-size: 13px;
			}

			#ph ul li {
				float: left;
			}

			#ph ul li a {
				text-decoration: none;
				color: #4e8cea;
				height: 5px;
			}

			#w3 {
				margin: 0px 0px 10px 0px;
			}

			#w3 a {
				margin: 0px 8px 0px 0px;
			}

			#w3 a:hover {
				color: #F0F8FF;
				background-color: #4E8CEA;
				padding: 2px 8px 2px 8px;
				line-height: 5px;
				border-radius: 5px;
			}

			#ph span {
				color: #F0F8FF;
				background-color: #4E8CEA;
				padding: 2px 8px 2px 8px;
				border-radius: 5px;
			}

			#prise ul {
				width: 680px;
				height: 180px;
			}

			#prise ul li {
				float: left;
				height: 100px;
				width: 225px;
				padding: 0px 0px 0px 0px;
			}

			#prise ul li span {
				float: left;
				padding: 0px 5px 0px 10px;
			}

			#prise ul li p {
				font-size: 14px;
			}

			#prise ul li a {
				font-size: 13px;
				color: #616161;
				line-height: 0px;
				text-decoration: none;
			}

			#sb {
				width: 440px;
				padding: 10px 0px;
			}

			#sb a {
				color: #616161;
				line-height: 0px;
				text-decoration: none;
				padding: 0px 13px 0px 13px;
			}

			#pho {
				width: 680px;
				height: 270px;
				margin: 0px 0px 0px 35px;
			}

			#w4 {
				font-size: 16px;
				font-weight: 1000;
				font-family: "microsoft yahei";
				padding: 4px 0px 4px 0px;
				
			}
			#w21 {
				border-top: #3984e1 solid 7px;
				padding: 15px 0px 30px 30px;
				color: #41516e;
				font-family: "arial narrow";
				font-size: 35px;
				text-decoration: none;
			}

			#about ul {
				height: 250px;
				padding: 0px 30px 0px 75px;
				border-bottom: #3984e1 solid 7px;
			}

			#about ul li {
				float: left;
				width: 250px;
				height: 200px;
				margin-right: 20px;
				text-align: center;
				line-height: 25px;
			}

			#about ul li h {
				font-size: 15px;
				font-weight: 200;
			}

			#about ul li h1 {
				font-size: 15px;
				font-weight: 200;
			}

			#footer {
				background: url(jmg/w1.jpg) no-repeat;
				width: 686px;
				height: 380px;
				margin: 50px 0px 20px 0px;
				padding: 20px 30px 0px 30px;

			}

			#footer p {
				margin: 0px 0px 15px 0px;
				font-size: 25px;
				font-weight: 1000;
				font-family: "arial narrow";
			}
			input[type=text] {
				background-color: black;
				opacity: 0.5;
				color: aliceblue;
				padding: 9px 80px 8px 8px;
				margin: 0px 15px 10px 0px;
				float: left;
			}

			.name {
				font-size: 16px;
			}

			#k {
				width: 36%;
				margin: 0px 80px 0px 0px;
				padding: 4px 9px 240px 8px;
				float: right;

			}

			#message {
				width: 40%;
				padding: 4px 9px 80px 8px;
			}

			#footer a {
				background-color: black;
				opacity: 0.7;
				text-decoration: none;
				float: left;
				font-size: 27px;
				color: #D2D6D7;
				padding: 5px;
			}

			#footer a:hover {
				color: aliceblue;
				font-size: 2.3em;
			}

			#call {
				font-size: 7px;
				text-align: center;
				color: #9c9e9f;
				margin-bottom: 8px;
			}

			#call p {
				margin-bottom: 7px;
			}

			#siteincredit {
				text-align: center;
			}

			.wrap {
				height: 400px;
				width: 686px;
				overflow: hidden;
				position: relative;
				margin: auto;
			}

			.wrap ul {
				position: absolute;
			}

			.wrap ul li {
				height: 400px;
			}

			.wrap ol {
				position: absolute;
				right: 5px;
				bottom: 10px;
			}

			.wrap ol li {
				height: 20px;
				width: 20px;
				background: #ccc;
				border: solid 1px #666;
				margin-left: 5px;
				color: #000;
				float: left;
				line-height: center;
				text-align: center;
				cursor: pointer;
			}

			.wrap ol .on {
				background: #E97305;
				color: #fff;
			}
			/* #wrap {
				width: 586px;
				white-space: nowrap;
				overflow: hidden;
				padding: 10px;
			}
			
			#wrap div {
				display: inline-block;
				font-size: 16px;
			} */
			#winpop {
				width: 200px;
				height: 0px;
				position: absolute;
				right: 0;
				bottom: 0;
				border: 1px solid #666;
				margin: 0;
				padding: 1px;
				overflow: hidden;
				display: none;
			}
			
			.close {
				position: absolute;
				right: 4px;
				top: -1px;
				color: #FFF;
				cursor: pointer;
			}
		</style>
		<script type="text/javascript">
			window.onload = function() {
				var wrap = document.getElementById('wrap'),
					pic = document.getElementById('pic').getElementsByTagName("li"),
					list = document.getElementById('list').getElementsByTagName('li'),
					index = 0,
					timer = null;

				// 定义并调用自动播放函数
				timer = setInterval(autoPlay, 2000);

				// 鼠标划过整个容器时停止自动播放
				wrap.onmouseover = function() {
					clearInterval(timer);
				}

				// 鼠标离开整个容器时继续播放至下一张
				wrap.onmouseout = function() {
					timer = setInterval(autoPlay, 2000);
				}
				// 遍历所有数字导航实现划过切换至对应的图片
				for (var i = 0; i < list.length; i++) {
					list[i].onmouseover = function() {
						clearInterval(timer);
						index = this.innerText - 1;
						changePic(index);
					}
				}

				function autoPlay() {
					if (++index >= pic.length) index = 0;
					changePic(index);
				}

				// 定义图片切换函数
				function changePic(curIndex) {
					for (var i = 0; i < pic.length; ++i) {
						pic[i].style.display = "none";
						list[i].className = "";
					}
					pic[curIndex].style.display = "block";
					list[curIndex].className = "on";
				}

			};

			var iPosition = 0;
			var msg= "我在黄昏上写了一封书信，载着落日的余晖和银河的浪漫，寄给你，寄给温柔本身";
			var iSpeed = 5;

			function banner() {
				document.isnform.banner.value = msg.substring(iPosition, msg.length); //截断字符串，赋值给text框
				if (iPosition++ == msg.length) //维护截断的位置，如果已经全部走出去，又c从0开始
					iPosition = 0;


			}
			window.setInterval("banner()",2000/iSpeed);
			// window.setInterval("banner()", 2000 / iSpeed);
			// var wrap = document.getElementById('wrap'),
			// 	first = document.getElementById('first');
			// var timer = window.setInterval(move, 15);
			// wrap.onmouseover = function() {
			// 	window.clearInterval(timer);
			// };
			// wrap.onmouseout = function() {
			// 	timer = window.setInterval(move, 15);
			// };
			
			// function move() {
			// 	wrap.scrollLeft++;
			// 	if (wrap.scrollLeft >= first.scrollWidth) {
			// 		wrap.scrollLeft = 0;
			// 	}
			// }
			$(document).ready(function() {
				$("#buy").mouseover(function() {
					$('.buylist').stop(true, true).slideDown(1000);
				})
				$("#buy").mouseout(function() {
					$('.buylist').stop(true, true).slideUp(1000);
					// $(".buylist").slideUp(1000);
			
				})
			})
		</script>
	</head>
	<body>
		<div id="container">
			<div id="header">
				<div id="he1">
					<ul>
						<li>
							<a href="index02.html"><span>登录</span></a>
							<a href="index02.html"><span class="w1">注册</span></a>
							<a href="#">主页</a>
							<a href="#">旅行</a>
							<a href="#">酒店</a>
							<a href="#">景点推荐</a>
							<a href="index03.html">抢购</a>
						</li>
					</ul>
				</div>
				<div class="wrap" id='wrap'>
					<ul id="pic">
						<li><img src="jmg/d1.jpg" alt=""></li>
						<li><img src="jmg/d2.jpg" alt=""></li>
						<li><img src="jmg/d3.jpg" width="686" height="450" alt=""></li>
						<li><img src="jmg/d4.jpg" width="686" height="450" alt=""></li>
						<li><img src="jmg/d5.jpg" width="686" height="450" alt=""></li>
					</ul>
					<ol id="list">
						<li class="on">1</li>
						<li>2</li>
						<li>3</li>
						<li>4</li>
						<li>5</li>
					</ol>
				</div>
			</div>
			<div class="w2">热门景点</div>
			<div id="ph">
				<ul>
					<li>
						<div id="w3">
							<a href="#"><span>精选</span></a>
							<a href="#">境内</a>
							<a href="#">日本</a>
							<a href="#">东南亚</a>
							<a href="#">欧洲</a>
							<a href="#">美洲</a>
							<a href="#">澳中东非</a>
						</div>
						<a href="#"><img src="jmg/t1.PNG" width="150" height="110"></a>
						<a href="#"><img src="jmg/t2.PNG" width="150" height="110"></a>
						<a href="#"><img src="jmg/t3.PNG" width="150" height="110"></a>
						<a href="#"><img src="jmg/t4.PNG" width="150" height="110"></a>
						<a href="#"><img src="jmg/t5.PNG" width="150" height="110"></a>
						<a href="#"><img src="jmg/t6.PNG" width="150" height="110"></a>
						<a href="#"><img src="jmg/t7.PNG" width="150" height="110"></a>
						<a href="#"><img src="jmg/t8.PNG" width="150" height="110"></a>
					</li>
				</ul>

			</div>
			<div class="w2">企业商务</div>
			<div id="prise">
				<ul>
					<li>
						<span><img src="jmg/q1.jpg" width="50" height="50"></span>
						<p>差旅预订管理</p>
						<a href="#">海量差旅产品，智能管控，助力企业差旅降本提取！</a>
					</li>
					<li>
						<span><img src="jmg/q2.jpg" width="50" height="50"></span>
						<p>公对公结算</p>
						<a href="#">公司账户支付，统一开票，员工出差免垫资，免报销！</a>
					</li>
					<li>
						<span><img src="jmg/q3.jpg" width="50" height="50"></span>
						<p>在线差旅报告</p>
						<a href="#">多维度差旅报告，商旅大数据指导企业优化差旅政策！</a>
					</li>
					<li>
						<p>合作优惠</p>
						<a href="#">光大信用卡约惠旅游季，上海建行指定龙卡专享</a>
					</li>
					<li>
						<p>合作伙伴</p>
						<div id="sb">
							<a href="#"><img src="jmg/g1.PNG" width="40" height="20"></a>
							<a href="https://www.tieyou.com"><img src="jmg/g2.PNG" width="40" height="20"></a>
							<a href="https://cn.toursforfun.com"><img src="jmg/g3.PNG" width="40" height="20"></a>
							<a href="https://www.tujia.com"><img src="jmg/g4.PNG" width="40" height="20"></a>
							<a href="https://www.wingontravel.com"><img src="jmg/g5.PNG" width="40" height="20"></a>
							<a href="#"><img src="jmg/g6.PNG" width="40" height="20"></a>
						</div>
					</li>
				</ul>
			</div>
			<div class="w2">旅图</div>
			<div id="pho">
				<div id="p1">
					<img src="jmg/p1.jpg" width="158" height="110">
					<img src="jmg/p2.jpg" width="140" height="110">
					<img src="jmg/p3.jpg" width="158" height="110">
					<img src="jmg/p4.jpg" width="140" height="110">
				</div>
				<div id="w4">
					<form name="isnform">
						<input style=" " size="90" name="banner">
					</form>
				</div>
				<!-- <div id="wrap">
					<div id="first">
						且将你的丝发在风中飞舞，且举你的酒杯向自由致谢，我愿是乐者的薄羽，我愿是天音的清芳，超然物外，在音泉中畅漾……
					</div>
				</div> -->
				<div id="p2">
					<img src="jmg/p5.jpg" width="150" height="90">
					<img src="jmg/p6.jpg" width="150" height="90">
					<img src="jmg/p7.jpg" width="150" height="90">
					<img src="jmg/p8.jpg" width="150" height="90">
				</div>
			</div>
			<div id="w21">关于旅行或许你会喜欢她</div>
			<div id="about">
				<ul>
					<li>
						<a href="https://weibo.com/u/2838117237?refer_flag=1005050010_&sudaref=www.baidu.com&display=0&retcode=6102&is_all=1"><img
							 src="jmg/pe1.jpg" width="210" height="150"></a>
						<p>房琪：房琪不放弃</p>
						<h>抖音旅游达人</h>
						<h1>从0到粉丝1000万</h1>
					</li>
					<li>
						<a href="https://www.weibo.com/raechoo?refer_flag=1005055013_&is_all=1"><img src="jmg/pe2.jpg" width="248" height="150"></a>
						<p>itsRae:</p>
						<h>旅行，其实不存在远近；</h>
						<h1>往城外开，去感受最简单的幸福！</h1>
					</li>
				</ul>
			</div>
			<div id="footer">
				<div id="form1">
					<p>联系我们</p>
					<form>
						<input type="text" class="name" placeholder="输入你的名字">
						<input type="text" id="k" placeholder=" ">
						<input type="text" class="name" placeholder="输入你的电话号码">
						<input type="text" class="name" placeholder="输入你的电子邮箱">
						<input type="text" id="message" placeholder="留言">
					</form>
					<a href="#">提交</a>
				</div>
			</div>
			<div id="call">
				<p>Copyright©1999-2020, ctrip.com. All rights reserved. | ICP证：沪B2-20050130 | 沪ICP备08023580号</p>
				<p>沪公网备31010502002731号</p>
				<p>违法和不良信息举报电话021-22500846丨中国旅游网站落实诚信建设主体责任承诺书</p>
			</div>
			<div id="siteincredit">
				<a href="scjgj.sh.gov.cn"><img src="jmg/1.PNG" width="80" height="30"></a>
				<a href="scjgj.sh.gov.cn"><img src="jmg/2.PNG" width="80" height="30"></a>
				<a href="scjgj.sh.gov.cn"><img src="jmg/3.PNG" width="80" height="30"></a>
				<a href="scjgj.sh.gov.cn"><img src="jmg/4.PNG" width="80" height="30"></a>
				<a href="scjgj.sh.gov.cn"><img src="jmg/5.PNG" width="80" height="30"></a>
				<a href="scjgj.sh.gov.cn"><img src="jmg/6.PNG" width="80" height="30"></a>
				<a href="scjgj.sh.gov.cn"><img src="jmg/7.PNG" width="80" height="30"></a>
				<a href="scjgj.sh.gov.cn"><img src="jmg/8.PNG" width="60" height="30"></a>
			</div>
		</div>
	</body>
</html>
